<template>
	<view class="container">
		<view class="header">
			<text>创建项目</text>
		</view>
		<form @submit.prevent="submitForm()" autocomplete="off">
			<view class="form-group">
				<label>项目名称 <text class="required">*</text></label>
				<input v-model="from.projectName" type="text" placeholder="请输入项目名称" />
			</view>
			<view class="form-group">
				<label>项目描述</label>
				<input v-model="from.projectDescription" type="text" placeholder="请输入项目描述" />
			</view>
			<view class="form-group">
				<label>项目期限 <text class="required">*</text></label>
				<picker mode="date" @change="handleDateChange" :start="from.startDate" :value="from.endDate">
					<view class="picker">
						<text>{{ from.endDate ? from.endDate : '选择项目期限' }}</text>
					</view>
				</picker>
			</view>
			<button class="submit-btn" type="button" @click="submitForm">创建项目</button>
		</form>
	</view>
</template>

<script>
import api from '@/api/api.js'
export default {
  data() {
    return {
      from: {
        teamId: -1, // 初始化为无效值，等待赋值
        projectName: '',
        projectDescription: '',
        startDate: this.getToday(),
        endDate: '',
        status: '100',
        members: null
      }
    };
  },
  onLoad() {
    // 页面加载时验证是否有有效团队
    const storedTeam = wx.getStorageSync('TheChoosenTeam');
    if (!storedTeam || !storedTeam.teamId) {
      console.warn('未选择团队或团队无效');
      this.showToast('创建项目前请选择团队');
      // 提示停留 2.5 秒后，页面停留 1 秒再返回
      setTimeout(() => {
        wx.navigateBack(); // 返回上一页
      }, 1000); // 页面停留时间为 1 秒
      return;
    }

    // 设置有效的 teamId
    this.from.teamId = storedTeam.teamId;

    // 调用 API 获取团队成员
    api.getTeamUsers({ teamId: this.from.teamId })
      .then(re => {
        if (re.statusCode !== 200 || !re.data) {
          console.error('获取团队成员失败：', re);
          this.showToast('获取团队成员失败，请稍后重试');
          return;
        }
        const data = re.data.data || [];
        console.info('团队成员数据：', data);
        this.from.members = data;
      })
      .catch(err => {
        console.error('获取团队成员时发生错误：', err);
        this.showToast('获取团队成员时发生错误');
      });
  },
  methods: {
    getToday() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    submitForm() {
      // 验证项目名称
      if (this.from.projectName === '') {
        this.showToast('项目名称是必填项');
        return;
      }
      if (this.from.projectName.length > 50) {
        this.showToast('项目名称不能超过50个字');
        return;
      }
      // 验证项目描述
      if (this.from.projectDescription && this.from.projectDescription.length > 50) {
        this.showToast('项目描述不能超过50个字');
        return;
      }
      // 验证结束日期
      if (!this.from.endDate) {
        this.showToast('请选择项目结束日期');
        return;
      }
      console.log('提交的数据：', this.from);

      // 调用创建项目 API
      api.insertproject(this.from)
        .then(res => {
          uni.switchTab({
            url: '/pages/team_main/team_main'
          });
          const messageTitle = '项目创建提示';
          const messageNote = `项目名称：${this.from.projectName}
项目描述：${this.from.projectDescription}
参与人员：${this.from.members.map(member => member.nickname).join(',')}
开始日期：${this.from.startDate}
截止日期：${this.from.endDate}`;
          // 向成员发送通知
          this.from.members.forEach(member => {
            const message = {
              title: messageTitle,
              note: messageNote,
              userId: member.userId
            };
            api.sendMessage(message).catch(err => {
              console.error('消息发送失败：', err);
            });
          });
        })
        .catch(err => {
          console.error('创建项目失败：', err);
          this.showToast('创建项目失败，请稍后重试');
        });
    },
    handleDateChange(event) {
      const selectedDate = new Date(event.detail.value);
      const startDate = new Date(this.from.startDate);

      if (selectedDate < startDate) {
        this.showToast('不能选择起始日期之前的日期');
        return;
      }
      this.from.endDate = event.detail.value;
    },
    showToast(message) {
      if (!message) {
        message = '未知错误，请重试';
      }
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2500 // 提示停留时间设置为 2.5 秒
      });
    }
  }
};

</script>
<style scoped>
	/* 容器样式 */
	.container {
		background-color: white;
		padding: 24px;
		border-radius: 12px;
		max-width: 360px;
		margin: auto;
	}

	/* 标题样式 */
	.header text {
		font-size: 25px;
		font-weight: bold;
		margin-top: 60px;
		margin-bottom: 24px;
		display: block;
		text-align: center;
		color: #333;
	}

	/* 表单组样式 */
	.form-group {
		margin-bottom: 25px;
	}

	label {
		display: block;
		font-size: 15px;
		margin-bottom: 10px;
		color: #666;
	}

	input {
		width: 93.2%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 14px;
		color: #333;
	}

	/* 日期选择器样式 */
	.picker {
		width: 93.2%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 14px;
		color: #333;
	}

	/* 提交按钮样式 */
	.submit-btn {
		width: 100%;
		padding: 8px;
		background-color: #1e90ff;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 18px;
		cursor: pointer;
		font-weight: bold;
		text-align: center;
		transition: background-color 0.3s ease;
		margin-top: 50px;
	}

	.submit-btn:hover {
		background-color: #1c86ee;
	}

	.submit-btn:active {
		background-color: #1c86ee;
		box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
	}


	/* 必填标记 */
	.required {
		color: red;
		font-size: 16px;
	}
</style>
